import { memo } from "react"
import ArticlesList from "../ArticlesList"

const mock_data = {
    "status": 1,
    "message": '查询成功！！！',
    "data": {
        "articles": [
            {
                "slug": "1371cdf8",
                "title": "你好aa",
                "description": "html 你好aa",
                "body": "html 你好aa",
                "createdAt": "2022-01-20T05:28:57.000Z",
                "updatedAt": "2022-01-20T05:28:57.000Z",
                "userEmail": "lisi@qq.com",
                "tags": [
                    "html",
                    "tag1"
                ],
                "author": {
                    "username": "lisi",
                    "email": "lisi@qq.com",
                    "bio": null,
                    "avatar": null
                },
                "isFavorite": false,
                "favoriteCount": 55
            },
            {
                "slug": "1371cdf8",
                "title": "你好aa",
                "description": "html 你好aa",
                "body": "html 你好aa",
                "createdAt": "2022-01-20T05:28:57.000Z",
                "updatedAt": "2022-01-20T05:28:57.000Z",
                "userEmail": "lisi@qq.com",
                "tags": [
                    "html",
                    "tag1"
                ],
                "author": {
                    "username": "lisi",
                    "email": "lisi@qq.com",
                    "bio": null,
                    "avatar": null
                },
                "isFavorite": true,
                "favoriteCount": 33
            },
            {
                "slug": "1371cdf8",
                "title": "你好aa",
                "description": "html 你好aa",
                "body": "html 你好aa",
                "createdAt": "2022-01-20T05:28:57.000Z",
                "updatedAt": "2022-01-20T05:28:57.000Z",
                "userEmail": "lisi@qq.com",
                "tags": [
                    "html",
                    "tag1"
                ],
                "author": {
                    "username": "lisi",
                    "email": "lisi@qq.com",
                    "bio": null,
                    "avatar": null
                },
                "isFavorite": false,
                "favoriteCount": 55
            },
        ],
        "articlesCount": 3
    }

}


//关注用户的文章
const YourTab = memo((props) => {
    return (
        <li className="nav-item">
            <button type="button" className={props.tab === 'yours' ? 'nav-link active' : 'nav-link'}>
            <i class="fa fa-bomb"></i> 关注
            </button>
        </li>
    )
})

//全局文章
const GlobalTab = memo((props) => {
    return (
        <li className="nav-item">
            <button type="button" className={props.tab === 'all' ? 'nav-link active' : 'nav-link'}>
            <i class="fa fa-window-maximize"></i> 全部
            </button>
        </li>
    )
})

//标签查询文章
const TagTab = memo((props) => {
    const { tag } = props
    if (!tag) {
        return null
    }
    return (
        <li className="nav-item">
            <button type="button" className='nav-link active' >
            <i class="fa fa-comments"></i> {tag}
            </button>
        </li>
    )
})

const Main = memo((props) => {
    return (
        <div className="col-md-9">
            <div className="feed-toggle">
                <ul className="nav nav-pills outline-active">
                    <YourTab tab='' />
                    <GlobalTab tab='all' />
                    <TagTab tag='html' />
                </ul>
            </div>

            <ArticlesList articles={mock_data.data.articles} articlesCount={mock_data.data.articlesCount} currentPage={1} />
        </div>
    )
})

export default Main